<template>
    <div>
        <video :id="player" class="cameracommer"  muted autoplay
	  style="height: 100%; max-width: none"></video>
    </div>
</template>

<script>
import flvjs from "flv.js";

export default {
    name:"flvVideo",
    props:{
        flv:{
            type:Object || Array,
            required:true
        }
    },
    watch:{
        flv:{
            deep:true,
            immediate:true,
            handler(n,o){
                this.flvUrl = n.url;
                this.player = n.name;
            }
        },
    },
    data() {
        return {
            player: null,
            flvUrl:{},
        };
    },
    mounted() {
        setTimeout(() => {
        this.init();
        }, 1000);
    },
    methods: {
        init() {
            let videoElement = document.getElementById(this.player);
            // let rtspUrl = 'rtsp://admin:yao123456@192.168.1.212:554/Streaming/Channels/401';
            let rtspUrl = this.flvUrl;
            if (flvjs.isSupported()) {
                var flvPlayer = flvjs.createPlayer({
                    type: 'flv',					//媒体类型
                    // url: `ws://192.168.0.245:8888/rtsp/1/?url=${rtspUrl}`,//245服务器
                    url: `ws://192.168.3.116:8888/rtsp/1/?url=${rtspUrl}`,// YG本地
                    isLive: true,					//数据源是否为直播流
                    hasAudio: false,				//数据源是否包含有音频
                    hasVideo: true,					//数据源是否包含有视频
                    enableStashBuffer: false		//是否启用缓存区
                }, {
                    enableWorker: false, 			//不启用分离线程
                    enableStashBuffer: false, 		//关闭IO隐藏缓冲区
                    autoCleanupSourceBuffer: true 	//自动清除缓存
                });
                flvPlayer.attachMediaElement(videoElement);	//将播放实例注册到节点
                flvPlayer.load(); 					//加载数据流
                flvPlayer.play();					//播放数据流
            }
        }
    }
}
</script>
<style scoped lang="less">
 .cameracommer{
   width: 466px;
   height:287px;
//    position:absolute;
//    bottom:400px;
 }
</style>
